<template>
<!--  申请资料-->
	<view class="apply">
		<cu-custom bgColor="bg-gradual-blue" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">申请资料</block>
		</cu-custom>		
		<form @submit="warnHandler" @reset="formReset">
			<view class="apply-top">
				<text>个人资料</text>
			</view>
			<view class="fill-in">
				<view>
					<text>姓名</text>
					<input type="text" name="name" v-model="UserInfo.name" placeholder="请填写收货人的姓名"/>
				</view>
				<view>
					<text>手机号码</text>
					<input type="text" name="phone" v-model="UserInfo.phone" placeholder="请填写收货人的手机号码"/>
				</view>
				<view>
					<text>常住地址</text>
					<view @click="showMulLinkageThreePicker" name="address" v-model="address">
						{{ params.location_p ? params.location_p + '-' + params.location_c + '-' + params.location_a : citys }}
					</view>
				</view>
				<view>
					<text>备注</text>
					<input type="text" name="remark"  v-model="UserInfo.remark"/>
				</view>
				<view class="no-border">
					<view>
						<checkbox-group @change="change">
							<checkbox :class="['red', { checked: isagre }]" :checked="isagre"></checkbox>
							<text @tap="showAgre = true">阅读区域团队协议</text>
						</checkbox-group>
					</view>
				</view>
			</view>
			 <button class="apply-butto" type="warn" :disabled="disabled" :loading="loading"  formType="submit">提交申请</button>
		</form>
		
		<mpvue-city-picker :themeColor="themeColor" ref="mpvueCityPicker" :pickerValueDefault="cityPickerValueDefault"
		@onCancel="onCancel" @onConfirm="onConfirm"></mpvue-city-picker>
		
		<alert-rich :source="agre" :show="showAgre" @on-close="showAgre = false"></alert-rich> 
	</view>
</template>

<script>
	import { applicationMaterials, AgentAppy } from '@/common/api/lbt'
	import mpvueCityPicker from '@/components/mpvue-citypicker/mpvueCityPicker'
	import AlertRich from '@/components/richtext'
	import graceChecker from '@/common/utils/graceChecker'
	export default {
		name:'applicationMaterials',
		components: { mpvueCityPicker, AlertRich },
		data () {
			return {
				form:{},
				isagre: false,
				disabled: true,
				loading: false,
				showAgre: false,
				agre: '13131',
				citys: '请选择地址',
				themeColor: '#007AFF',
				cityPickerValueDefault: [0, 0, 1],
				params: {
					location_p: '',
					location_c: '',
					location_a: ''
				},
				UserInfo: {
					name: '',
					phone: '',
					remark: '',
					aplay_grate: 0,
					
				},
				address:'',
			}
		},
		onLoad(oab){
			this.UserInfo.aplay_grate = oab.id
			this.getInfo() 
		},
		methods: { 
			getInfo () {
				uni.showLoading({title:'加载中...'})
				applicationMaterials().then(res => {
					console.log(res)
// 					this.agre = res.agreement
					console.log(typeof(res.agreement))
// 					console.log(this.agre)
					uni.hideLoading()
				})
			},
			warnHandler(e){
				const rule = [
					{ name: "name", checkType : "notnull", errorMsg: "请输入姓名" },
					{ name: "phone", checkType : "phoneno", errorMsg: "请输入正确的手机号" }
				]
				const formData = e.detail.value
				if(this.address == ""){
					uni.showToast({ title:"请选择常住地址", icon:"none"})
				}else{
					const checkRes = graceChecker.check(formData, rule)
					console.log(checkRes)
					if (checkRes) {
					    this.loading = true				
						AgentAppy(Object.assign({}, this.UserInfo, this.params) ).then(res => {
							console.log(res)
							this.loading = false
							uni.showModal({
								title: '',
								content: res.data,
								showCancel: false
							})
						})	
					} else {
						uni.showToast({ title: graceChecker.error, icon: "none" })
					}
				}
				
			},
			onConfirm(e) {
				const city = e.label.split('-')
				this.address = e.label
				this.params.location_p = city[0]
				this.params.location_c = city[1]
				this.params.location_a = city[2]
			},
			onCancel(e) {},
			showMulLinkageThreePicker() {
				this.$refs.mpvueCityPicker.show()
			},
			change (e) {
				this.isagre = !this.isagre
				this.disabled = !this.isagre
			},
		
		}
	}
</script>

<style lang="less">
	@import '../../common/styles/variables.less';
	.apply{
		.apply-top{
			padding: 15upx 25upx;
		}
		.fill-in{
			background-color: white;
			padding:0 25upx;
			& > view{
				display: flex;
				padding: 15upx 0;
				align-items: center;
				.border-bottom;
				&>text{
					font-size: 25upx;
					width: 120upx;
					text-align: justify;
					text-align-last: justify;
					padding-right: 25upx;
				}
				&>input,view{
					flex: 1;
				}
			}
			.no-border{
				border: none;
				checkbox {
					margin-right: 10upx
				}
			}
		}
		.apply-butto{
			margin: 25px 15upx 0upx 15upx;
		}
	}
</style>
